<template>
  <div class="bg_write">
    <el-row>
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-col>
    </el-row>
    <el-row class="content-right">
      <div>
        <div class="panel-single panel-single-light">
          <div class="formitems box">
            <label class="fi-name">展示方式：</label>
            <div class="form-controls list_class">
              <a
                href="javascript:;"
                @click.prevent="togg_class('1')"
                :class="{checked: classImg=='1'}"
                class="list_class_bg j-list_class_bg"
              >
                <i class="fa fa-th-large"></i>
                <span>图标橱窗展示(二级)</span>
              </a>
              <a
                href="javascript:;"
                @click.prevent="togg_class('2')"
                :class="{checked: classImg=='2'}"
                class="list_class_bg j-list_class_bg"
              >
                <i class="fa fa-th-large"></i>
                <span>图标橱窗展示(二级)</span>
              </a>
              <a
                href="javascript:;"
                @click.prevent="togg_class('3')"
                :class="{checked: classImg=='3'}"
                class="list_class_bg j-list_class_bg"
              >
                <i class="fa fa-cube gicon gicon-style6"></i>
                <span>图标橱窗展示(三级)</span>
              </a>
              <a
                href="javascript:;"
                @click.prevent="togg_class('4')"
                :class="{checked: classImg=='4'}"
                class="list_class_bg j-list_class_bg"
              >
                <i class="fa fa-font gicon gicon-style2 white"></i>
                <span>文字列表展示(三级)</span>
              </a>
              <a
                href="javascript:;"
                @click.prevent="togg_class('5')"
                :class="{checked: classImg=='5'}"
                class="list_class_bg j-list_class_bg"
              >
                <i class="fa fa-font gicon gicon-style2 white"></i>
                <span>图文展示（三级）</span>
              </a>
            </div>
            <div class="preview_area">
              <img
                v-if="classImg!=''"
                :src="require('../../../src/assets/img/config/def_'+classImg+'.jpg')"
              />
            </div>
          </div>
        </div>
      </div>
    </el-row>
    <el-col :span="22" class="men_add">
      <el-card shadow="always">
        <el-button :loading="$store.state.isLoading" @click="setClass" @keydown.13="setClass">保存</el-button>
      </el-card>
    </el-col>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
export default {
  components: {
    HeadTitle
  },
  data() {
    return {
      showAlert: true,
      classImg: "",
    };
  },
  methods: {
    getClassList() {
      var data = { iden: "shop_class" };
      this.$api.getSettings.findConfig(data).then(res => {
        if (res.data.code == 200 && res.data.status == 1) {
          this.classImg = res.data.result || "";
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    togg_class(str) {
      this.classImg = str;
    },
    setClass() {
      var params = {};
      params.iden = "shop_class";
      params.value = this.classImg;
      this.$api.getSettings.updateSetting(params).then(res => {
        if (res.status == 200 && res.statusText == "OK") {
          this.$message.success("修改成功！");
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    }
  },
  mounted() {
    this.getClassList();
  }
};
</script>
